<template>
  <a-table :data="tablists" :pagination="false" :row-key="rowKey">
    <template #columns>
      <a-table-column
        v-for="item of tableColumns.list"
        :key="item.key"
        align="left"
        :width="item.width"
        :title="(item.title as string)"
        :data-index="(item.key as string)"
      />
    </template>
  </a-table>
</template>

<script lang="ts">
  import { useRowKey, useTable } from '@/hooks/table'
  import { defineComponent, reactive, ref, toRef, watch } from 'vue'
  export default defineComponent({
    name: 'Table',
    props: {
      tablist: {
        type: Array,
        require: true,
      },
    },
    setup(props) {
      const tempTableProps = toRef(props, 'tablist')
      const rowKey = useRowKey('id')
      const table = useTable()
      const tablists: any = ref([
        {
          id: 3,
          name: '测试',
        },
      ])
      const tableColumns: any = reactive({
        list: [
          {
            title: 'ID',
            key: 'id',
            dataIndex: 'id',
          },
          {
            title: '名称',
            key: 'name',
            dataIndex: 'name',
          },
        ],
      })
      watch(
        () => tempTableProps.value,
        (oldVal) => {
          tablists.value = oldVal
        }
      )
      return {
        rowKey,
        tableColumns,
        table,
        tablists,
      }
    },
  })
</script>

<style lang="less" scoped></style>
